/**
* 功能柱状图 / 菜单柱状图
*/

<template>
    <div class="device-bind-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">{{name}}</span>
            </div>
            <slot name="timeSelect"></slot>
            <div v-auto-resize style="height: 480px;" ref="chartEl" class="chart-wrap" />
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import commonMixin from '@/mixins/common'
import AutoResize from '@/directive/echart-resizer'

let oChart
export default {
  name: 'ChartStageTrend',
  mixins: [EchartsBase, commonMixin],
  directives: {
    AutoResize
  },
  props: {
    barChartData: {
      type: Array
    },
    name: {
      type: String
    }
  },
  watch: {
    barChartData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption(now)
        })
      }
    }
  },
  created () {
  },
  methods: {
    setOption (data) {
      let xAxisListData = []
      let series1Data = [] // up
      let series2Data = [] // pv
      if (this.name === '页面浏览柱状及趋势图') {
        this._.each(data, (item) => {
          xAxisListData.push(item.Function_name)
          series1Data.push(item.Function_UV)
          series2Data.push(item.Function_PV)
        })
      } else {
        this._.each(data, (item) => {
          xAxisListData.push(item.Time)
          series1Data.push(item.Num_of_active_users)
        })
      }
      let option = {
        grid: {
          top: '10%',
          bottom: '20%'
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            zoomLock: false,
            start: 0,
            end: 10
          },
          {
            type: 'inside',
            realtime: true,
            zoomLock: false,
            start: 0,
            end: 10
          }
        ],
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        legend: {
          data: ['UV', 'PV'],
          top: '1%',
          left: '10',
          textStyle: {
            color: '#2125296',
            fontSize: 16
          }
        },
        xAxis: {
          data: xAxisListData,
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#E9EBF1',
              width: 2
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            interval: 0,
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 11 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            },
            textStyle: {
              color: '#212529', // 文字颜色
              fontSize: 12
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.1)', 'rgba(250,250,250,0)']
            }
          }
        },
        yAxis: [{
          type: 'value',
          /* name: "亿元", */
          nameTextStyle: {
            color: '#ebf8ac',
            fontSize: 16
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E9EBF1',
              width: 2
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#212529',
              fontSize: 16
            }
          }

        },
        {
          type: 'value',
          /* name: "同比", */
          nameTextStyle: {
            color: '#ebf8ac',
            fontSize: 16
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: 'rgba(250,250,250,0.6)',
              fontSize: 16
            }
          }
        }
        ],
        series: [
          {
            name: 'UV',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#74DAC1'
                },
                {
                  offset: 1,
                  color: '#74DAC1'
                }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#74DAC1'
                },
                {
                  offset: 1,
                  color: '#74DAC1'
                }
                ]),
                borderWidth: 2
              }
            },
            data: series1Data
          },
          {
            name: 'PV',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#758BFF' }, { offset: 1, color: '#758BFF' }]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#758BFF' }, { offset: 1, color: '#758BFF' }]),
                borderWidth: 2
              }
            },
            data: series2Data
          }
        ]
      }
      oChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-bind-content{
        @include device-content;
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
    }

</style>
